import Icon1 from '@/img/icon1.png';
import Icon2 from '@/img/icon2.png';
import React, { useMemo, useState } from 'react';
import OStyle from './index.less';

interface StarProps {
  lightCount?: number;
  starCount?: number;
  readonly?: boolean;
  onChange?: (arg: number) => void;
}

const Setstar: React.FC<StarProps> = (props) => {
  const { onChange, readonly = false, lightCount = 0, starCount = 5 } = props;
  const [count, setCount] = useState<number>(lightCount);
  const star = useMemo(() => {
    const arr = [];
    for (let i = 1; i < Number(starCount) + 1; i++) {
      arr.push(i);
    }
    return arr;
  }, [starCount]);

  return (
    <div className={`${OStyle.setStarbox} flexr alc`}>
      {star.map((item) => {
        return (
          <div
            className={`${readonly ? OStyle.readStar_li : ''} ${OStyle.star_li}`}
            key={item}
            onClick={() => {
              if (!readonly) {
                setCount(item);
                onChange?.(item);
              }
            }}
          >
            {count >= item ? (
              <img src={Icon2} alt="" className={OStyle.staricon} />
            ) : (
              <img src={Icon1} alt="" className={OStyle.staricon} />
            )}
          </div>
        );
      })}
    </div>
  );
};

export default Setstar;
